Angular Material এ রেডিও বাটন (Radio Button) একটি জনপ্রিয় এবং ব্যবহারযোগ্য কম্পোনেন্ট, যা ব্যবহারকারীদের একটি নির্দিষ্ট অপশন নির্বাচন করার সুযোগ দেয়। রেডিও বাটন সাধারণত এমন পরিস্থিতিতে ব্যবহার করা হয় যেখানে একাধিক বিকল্পের মধ্যে থেকে একটিই নির্বাচন করতে হয়।

Angular Material এর MatRadioButton কম্পোনেন্টটি ব্যবহার করে রেডিও বাটন সহজেই তৈরি করা যায়। এটি Material Design গাইডলাইন অনুসরণ করে, যা অ্যাপ্লিকেশনগুলিতে আধুনিক এবং সুন্দর UI প্রদান করে।

রেডিও বাটন তৈরি করার ধাপ

১. Angular Material ইন্সটল করা

যদি Angular Material ইতিমধ্যেই ইন্সটল না করা থাকে, তাহলে প্রথমে এটি ইন্সটল করুন:

ng add @angular/material

২. প্রয়োজনীয় মডিউল ইমপোর্ট করা

রেডিও বাটন ব্যবহার করতে MatRadioModule মডিউলটি আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে:

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    MatRadioModule
  ]
})
export class AppModule { }

৩. রেডিও বাটন HTML কোড

এখন MatRadioButton কম্পোনেন্ট ব্যবহার করে রেডিও বাটন তৈরি করা যায়। এখানে একটি সাধারণ উদাহরণ দেয়া হলো:

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

উপরের কোডে, আমরা mat-radio-group ব্যবহার করেছি, যা রেডিও বাটনগুলোর একটি গ্রুপ তৈরি করে এবং ব্যবহারকারীর একটিই নির্বাচন করার অনুমতি দেয়।

৪. নির্বাচিত মান সংরক্ষণ করা

Angular এর ngModel ব্যবহার করে আপনি নির্বাচিত মানটি একটি ভেরিয়েবলে সংরক্ষণ করতে পারেন।

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

<p>You selected: {{ selectedOption }}</p>

এখানে, selectedOption ভেরিয়েবলটি রেডিও বাটনের নির্বাচিত মান ধারণ করে।

৫. রেডিও বাটন গ্রুপে ডিফল্ট মান সেট করা

আপনি ngModel এর মাধ্যমে রেডিও বাটন গ্রুপে ডিফল্ট মানও সেট করতে পারেন:

export class AppComponent {
  selectedOption: string = 'option2'; // ডিফল্ট নির্বাচিত অপশন
}

এখন, option2 ডিফল্ট হিসেবে নির্বাচিত থাকবে যখন পেজ লোড হবে।

রেডিও বাটন কাস্টমাইজেশন

Angular Material এর রেডিও বাটন বেশ কিছু কাস্টমাইজেশন অপশন সরবরাহ করে, যা আপনাকে বাটনের স্টাইল ও আউটপুট কন্ট্রোল করতে সহায়তা করবে।

১. রেডিও বাটনের স্টাইল পরিবর্তন

Angular Material এর রেডিও বাটনগুলো সাধারণত Material Design গাইডলাইন অনুসরণ করে, তবে আপনি চাইলে এটি কাস্টম স্টাইলও করতে পারেন।

mat-radio-button {
  color: #ff5722;  /* বাটনের রং পরিবর্তন */
}

২. রেডিও বাটনটি নিষ্ক্রিয় (Disabled) করা

রেডিও বাটনকে নিষ্ক্রিয় করতে disabled অ্যাট্রিবিউট ব্যবহার করা হয়:

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="option1" disabled>Option 1 (Disabled)</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
</mat-radio-group>

৩. রেডিও বাটনটিতে চেকবক্স স্টাইল দেয়া

Angular Material এর রেডিও বাটনে MatRadioButton এর জন্য আপনি চেকবক্সের মতো স্টাইলও কাস্টমাইজ করতে পারেন।

<mat-radio-group aria-label="Select an option" [color]="selectedOption === 'option1' ? 'primary' : 'accent'">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
</mat-radio-group>

এখানে color প্রপার্টি ব্যবহার করে রেডিও বাটনের রঙ পরিবর্তন করা হয়েছে, যা নির্বাচিত অপশনের উপর ভিত্তি করে রঙ পরিবর্তিত হবে।

Angular Material রেডিও বাটন (MatRadioButton) কম্পোনেন্ট অ্যাঙ্গুলার অ্যাপ্লিকেশনগুলির জন্য একটি শক্তিশালী এবং সহজে ব্যবহারযোগ্য উপাদান। এটি Material Design অনুসরণ করে একটি আধুনিক ও সুন্দর UI তৈরি করতে সাহায্য করে এবং mat-radio-group ব্যবহার করে একাধিক অপশনের মধ্যে থেকে একটি নির্বাচন করা যায়। আপনি ngModel ব্যবহার করে নির্বাচিত মান সংগ্রহ করতে পারেন এবং থিম বা কাস্টম স্টাইলিংয়ের মাধ্যমে রেডিও বাটনকে আপনার অ্যাপ্লিকেশনের ডিজাইনের সাথে মানানসই করতে পারেন।

Angular Material এর MatRadioButton একটি অত্যন্ত জনপ্রিয় এবং ব্যবহারযোগ্য রেডিও বাটন কম্পোনেন্ট। এটি Material Design-এর গাইডলাইন অনুসরণ করে তৈরি করা হয়েছে এবং ডেভেলপারদের জন্য বিভিন্ন কাস্টমাইজেশন অপশন প্রদান করে। রেডিও বাটন ব্যবহারকারীদের মধ্যে থেকে একটি নির্দিষ্ট বিকল্প নির্বাচন করতে সহায়ক।

Angular Material এর MatRadioButton কম্পোনেন্টের সাহায্যে আপনি সহজেই সুন্দর এবং আধুনিক রেডিও বাটন তৈরি করতে পারেন।

রেডিও বাটন ইন্সটল এবং সেটআপ

প্রথমে Angular Material ইন্সটল করা থাকতে হবে। যদি এটি এখনও ইন্সটল না করে থাকেন, তবে নিম্নলিখিত কমান্ডটি ব্যবহার করে Angular Material ইন্সটল করুন:

ng add @angular/material

এছাড়া, MatRadioModule ব্যবহার করতে হবে, যা রেডিও বাটনের কম্পোনেন্ট সরবরাহ করে। MatRadioModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    MatRadioModule
  ]
})
export class AppModule { }

রেডিও বাটন ব্যবহার করা

এখন আপনি MatRadioButton কম্পোনেন্ট ব্যবহার করে HTML ফাইলে রেডিও বাটন তৈরি করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হলো:

১. HTML এ রেডিও বাটন ব্যবহার

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, <mat-radio-group> ট্যাগটি রেডিও বাটনের গ্রুপ তৈরি করবে, এবং প্রতিটি <mat-radio-button> একটি পৃথক রেডিও বাটন তৈরি করবে। গ্রুপের মধ্যে শুধুমাত্র একটি বাটন নির্বাচন করা সম্ভব হবে, কারণ রেডিও বাটনগুলি একে অপরকে এক্সক্লুসিভলি নির্বাচন করতে সাহায্য করে।

২. টাইপস্ক্রিপ্টে সিলেক্টেড ভ্যালু বাউন্ড করা

আপনি যদি রেডিও বাটনের সিলেক্টেড ভ্যালুকে টাইপস্ক্রিপ্টে ব্যবহার করতে চান, তবে [(ngModel)] ব্যবহার করে রেডিও বাটনের মান বাউন্ড করতে পারেন।

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, selectedOption একটি টাইপস্ক্রিপ্ট ভ্যারিয়েবল যা সিলেক্ট করা অপশনটি ধারণ করবে।

৩. টাইপস্ক্রিপ্ট কোড

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-button',
  templateUrl: './radio-button.component.html',
})
export class RadioButtonComponent {
  selectedOption: string = 'option1';  // ডিফল্ট সিলেক্টেড অপশন
}

এখানে, selectedOption হল ডিফল্ট মান, এবং ব্যবহারকারী যদি অন্য কোনো অপশন নির্বাচন করে, তা পরিবর্তিত হবে।

কাস্টমাইজেশন অপশন

১. ডিফল্ট সিলেক্ট করা অপশন

আপনি সহজেই একটি ডিফল্ট রেডিও বাটন সিলেক্ট করতে পারেন। যেমন:

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1" checked>Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, checked অ্যাট্রিবিউট ব্যবহার করে আপনি প্রথম রেডিও বাটনটি ডিফল্ট হিসেবে সিলেক্ট করতে পারেন।

২. রেডিও বাটন ডিসেবল করা

আপনি রেডিও বাটনটি ডিসেবল (অক্ষম) করতে চাইলে disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2" disabled>Option 2 (Disabled)</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, "Option 2" রেডিও বাটনটি ডিসেবল করা হয়েছে, যা ব্যবহারকারী নির্বাচন করতে পারবেন না।

৩. রেডিও বাটন স্টাইল কাস্টমাইজেশন

আপনি CSS ব্যবহার করে রেডিও বাটনের স্টাইলও কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

mat-radio-button {
  font-size: 16px;
  color: #6200ea;
}

এটি রেডিও বাটনের ফন্ট সাইজ এবং রঙ পরিবর্তন করবে।

Angular Material এর MatRadioButton কম্পোনেন্ট খুবই সহজ এবং ব্যবহারযোগ্য, যা অ্যাপ্লিকেশনগুলিতে একটি সুন্দর এবং আধুনিক রেডিও বাটন তৈরি করতে সাহায্য করে। আপনি [(ngModel)] ব্যবহার করে সিলেক্ট করা অপশন টাইপস্ক্রিপ্টে বাউন্ড করতে পারেন এবং রেডিও বাটনগুলির কাস্টমাইজেশন অপশন ব্যবহার করে আপনার UI কে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করতে পারেন।

Angular Material এ রেডিও বাটন একটি জনপ্রিয় ইনপুট কম্পোনেন্ট, যা ব্যবহারকারীদের একটি নির্দিষ্ট বিকল্প নির্বাচন করতে সাহায্য করে। mat-radio-button কম্পোনেন্ট ব্যবহার করে অ্যাঙ্গুলার অ্যাপ্লিকেশনে রেডিও বাটন তৈরি করা যায়। গ্রুপ করা রেডিও বাটন ব্যবহারকারীদের জন্য অনেকটা একটি নির্দিষ্ট সেট থেকে একটি অপশন নির্বাচন করার সুবিধা দেয়।

অ্যাঙ্গুলার ম্যাটেরিয়াল এর মাধ্যমে রেডিও বাটনগুলো গ্রুপ করা খুবই সহজ এবং এটি mat-radio-group এর মাধ্যমে করা হয়। এই গ্রুপের মধ্যে একাধিক রেডিও বাটন থাকতে পারে, তবে ব্যবহারকারী একসাথে একটির বেশি রেডিও বাটন সিলেক্ট করতে পারবে না।

রেডিও বাটন গ্রুপ করার জন্য প্রয়োজনীয় পদক্ষেপ

১. Angular Material এর রেডিও বাটন মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে MatRadioModule মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা যায়।

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    MatRadioModule
  ]
})
export class AppModule { }

২. HTML এ রেডিও বাটন গ্রুপ তৈরি করা

mat-radio-group কম্পোনেন্ট ব্যবহার করে রেডিও বাটনগুলো গ্রুপ করা হয়। এর মধ্যে বিভিন্ন mat-radio-button উপাদান থাকবে এবং একবারে একটি রেডিও বাটন সিলেক্ট করা যাবে।

<mat-radio-group aria-label="Select an option" [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে ngModel ব্যবহার করা হয়েছে, যা ব্যবহারকারী যে অপশনটি সিলেক্ট করবে, তার মান ধরে রাখে। এই ভ্যালুটা selectedValue নামে একটি প্রপার্টি হয়ে থাকবে, যা TypeScript ফাইলে ডিফাইন করা হবে।

৩. টাইপস্ক্রিপ্ট ফাইলে ডেটা মডেল তৈরি করা

এখন, TypeScript ফাইলে selectedValue ডিফাইন করুন যা আপনার সিলেক্ট করা রেডিও বাটনের মান ধারণ করবে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-button-example',
  templateUrl: './radio-button-example.component.html',
  styleUrls: ['./radio-button-example.component.css']
})
export class RadioButtonExampleComponent {
  selectedValue: string = 'option1';  // ডিফল্ট মান
}

এখন, selectedValue প্রপার্টি mat-radio-group এর মধ্যে সিলেক্ট করা অপশনের মান ধারণ করবে।

৪. রেডিও বাটন গ্রুপ স্টাইলিং (ঐচ্ছিক)

আপনি চাইলে CSS ব্যবহার করে রেডিও বাটনের স্টাইল কাস্টমাইজ করতে পারেন। এটি অ্যাপ্লিকেশনের ডিজাইন উন্নত করতে সাহায্য করবে।

mat-radio-button {
  margin-bottom: 10px;
}

রেডিও বাটন গ্রুপের অতিরিক্ত বৈশিষ্ট্য

• disabled: আপনি রেডিও বাটনগুলো ডিজেবল করতে পারেন, যাতে ব্যবহারকারী সেগুলো নির্বাচন করতে না পারে।

<mat-radio-group aria-label="Select an option" [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2" disabled>Option 2</mat-radio-button>
</mat-radio-group>

• name: একাধিক রেডিও বাটনের জন্য একে অপরকে গ্রুপ করার জন্য name অ্যাট্রিবিউট ব্যবহার করা যেতে পারে। এটি শুধুমাত্র একবারে একটি বিকল্প নির্বাচন করতে সহায়ক হবে।

<mat-radio-group name="group1" [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
</mat-radio-group>

• aria-label: অ্যাক্সেসিবিলিটি সুনিশ্চিত করতে aria-label ব্যবহার করতে পারেন, যাতে স্ক্রীন রিডার ব্যবহারকারীরা বুঝতে পারেন যে এটি একটি রেডিও বাটন গ্রুপ।

<mat-radio-group aria-label="Choose a color" [(ngModel)]="selectedColor">
  <mat-radio-button value="red">Red</mat-radio-button>
  <mat-radio-button value="green">Green</mat-radio-button>
  <mat-radio-button value="blue">Blue</mat-radio-button>
</mat-radio-group>

Angular Material এর রেডিও বাটন গ্রুপ ব্যবহার করা খুবই সহজ এবং এটি আপনাকে ইউজারের কাছ থেকে একটি নির্দিষ্ট পছন্দ নেওয়ার জন্য একটি সহজ উপায় দেয়। mat-radio-group এবং mat-radio-button কম্পোনেন্টের মাধ্যমে আপনি একাধিক রেডিও বাটনকে গ্রুপ করে একটি সেট থেকে একমাত্র একটি অপশন নির্বাচন করতে পারবেন। Angular এর ngModel ডিরেকটিভ ব্যবহার করে আপনি এই নির্বাচিত মানটি অ্যাপ্লিকেশনে ধারণ করতে পারবেন, যা অ্যাপ্লিকেশনের বিভিন্ন অংশে ব্যবহার করা যাবে।